<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../../jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
//<![CDATA[
    google.load('visualization', '1', {packages: ['table']});

    var DATA_SOURCE_URL = "https://docs.google.com/spreadsheet/ccc?key=0AsQK4ViswXzydHJQQ1dYSGJqYVJOSUg5OEJ2b1NGd1E&gid=5";
    
    var current = Math.floor(Math.random()*101);
    
    jQuery(document).ready(function(){    
    	
    	$("#table").hide();

	    var query = new google.visualization.Query(DATA_SOURCE_URL);
	    query.setQuery('select B, C, D order by B');
	    query.send(handleQueryResponse);
	    
	    $("#show").live("click", function() {
	    	$(this).hide("slow");
	    	$("#answer").show("slow");
	    });
	    
	    $("#next").live("click", function() {
	    	current++;
	    	var selected = $(this).attr("class");
	    	renderList(selected, current);
	    });

    });

    
    function handleQueryResponse(response) {

      if (response.isError()) {

        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

        return;

      }

      var data = response.getDataTable();
      visualization = new google.visualization.Table(document.getElementById('table'));

	  visualization.draw(data, {'allowHtml': true});
	  
	  // start post processing
	  $("tr.google-visualization-table-tr-even, tr.google-visualization-table-tr-odd")
	  		.addClass("datarow");
	  
	  var prev = ""
	  $("tr.datarow").each(function(i, item){
		  var group = $(this).find("td").eq(0).text();
		  if(prev != group) {
		  	$("#group").append("<option>" + group + "</option>");
		  	prev = group;
		  }
	  });
	  
	  // register action handler
	  $("#group").change(function() {
		 var selected =  $("#group option:selected").text();
		 
		 renderList(selected, current);
		 
	  });
	  
	  var first = $("#group option").eq(0).text();
	  renderList(first, current);
	  
    } // end handle response

    function renderList(selected, index) {
		
		 var cnt = 0;
		 
		 $("#question").empty();
		 $("#answer").hide();

		  $("tr.datarow").each(function(i, item){
			  var group = $(this).find("td").eq(0).text();
			  if(selected == group) {
				 cnt++;
				 if(index == i) {
					 var question = $(this).find("td").eq(1).text();
					 var answer = $(this).find("td").eq(2).text();
					 $("#question").html(question);
		  			 $("#answer").html(answer);
		  			 
		  			 if(answer != "") {
		  				$("#show").show();	 
		  			 } 
		  			 
		  			 $("#next").removeClass();
		  			 $("#next").addClass(selected);
		  			 return;
				 }
			  }
		  });
		  
		  if(cnt <= index) {
			  renderList(selected, index % cnt);
		  }
    }

//]]>
    </script>

  </head>



  <body>

    <div id="table"></div>
    <select id="group"></select>
    <div id="card">
    	<p id="question"></p>
    	<p id="answer"></p>
    	<p>
    		<span><a id="show" href="#">show</a></span>
    		<span><a id="next" href="#">next</a></span>
    	</p> 
    </div>

  </body>

</html>